<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创意型简历模板</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&display=swap');
    
    :root {
      --primary-color: #ff3366;
      --secondary-color: #6c63ff;
      --accent-color: #2cced2;
      --dark-color: #2d2d2d;
      --light-color: #ffffff;
      --gray-color: #f3f3f3;
      --text-color: #333333;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Montserrat', sans-serif;
      background-color: var(--gray-color);
      color: var(--text-color);
      line-height: 1.6;
      overflow-x: hidden;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
    }
    
    /* 导航栏 */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 20px 0;
      background-color: rgba(255, 255, 255, 0.95);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      transition: all 0.3s ease;
    }
    
    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 50px;
    }
    
    .logo {
      font-family: 'Playfair Display', serif;
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--primary-color);
      text-decoration: none;
    }
    
    .nav-links {
      display: flex;
      gap: 30px;
    }
    
    .nav-link {
      text-decoration: none;
      color: var(--dark-color);
      font-weight: 500;
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.3s ease;
      position: relative;
    }
    
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 2px;
      background-color: var(--primary-color);
      transition: width 0.3s ease;
    }
    
    .nav-link:hover {
      color: var(--primary-color);
    }
    
    .nav-link:hover::after {
      width: 100%;
    }
    
    /* 英雄区域 */
    .hero {
      height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      background-color: var(--light-color);
    }
    
    .hero-content {
      display: flex;
      width: 100%;
      height: 100%;
    }
    
    .hero-text {
      flex: 1;
      padding: 100px 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .hero-image {
      flex: 1;
      position: relative;
      overflow: hidden;
      background-color: var(--primary-color);
    }
    
    .hero-image img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.8;
      mix-blend-mode: multiply;
    }
    
    .hero-title {
      font-family: 'Playfair Display', serif;
      font-size: 4rem;
      font-weight: 700;
      margin-bottom: 20px;
      line-height: 1.2;
      color: var(--dark-color);
      position: relative;
    }
    
    .hero-title span {
      color: var(--primary-color);
    }
    
    .hero-subtitle {
      font-size: 1.2rem;
      font-weight: 300;
      margin-bottom: 30px;
      color: #666;
    }
    
    .hero-cta {
      display: inline-block;
      padding: 12px 30px;
      background-color: var(--primary-color);
      color: white;
      text-decoration: none;
      font-weight: 600;
      border-radius: 30px;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.3s ease;
      margin-top: 20px;
    }
    
    .hero-cta:hover {
      background-color: var(--dark-color);
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    
    /* 关于我部分 */
    .about {
      padding: 100px 50px;
      background-color: var(--light-color);
    }
    
    .section-title {
      font-family: 'Playfair Display', serif;
      font-size: 2.5rem;
      margin-bottom: 50px;
      text-align: center;
      position: relative;
    }
    
    .section-title::after {
      content: '';
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 3px;
      background-color: var(--primary-color);
    }
    
    .about-content {
      display: flex;
      gap: 50px;
      align-items: center;
    }
    
    .about-text {
      flex: 1;
    }
    
    .about-text p {
      margin-bottom: 20px;
      font-size: 1.1rem;
      line-height: 1.8;
    }
    
    .about-stats {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
    }
    
    .stat-item {
      text-align: center;
      padding: 30px;
      background-color: var(--gray-color);
      border-radius: 10px;
      transition: all 0.3s ease;
    }
    
    .stat-item:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      background-color: var(--primary-color);
      color: white;
    }
    
    .stat-number {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 10px;
      color: var(--primary-color);
    }
    
    .stat-item:hover .stat-number {
      color: white;
    }
    
    .stat-title {
      font-size: 1rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    
    /* 技能部分 */
    .skills {
      padding: 100px 50px;
      background-color: var(--gray-color);
    }
    
    .skills-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 30px;
    }
    
    .skill-card {
      background-color: var(--light-color);
      border-radius: 10px;
      padding: 30px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    
    .skill-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background-color: var(--primary-color);
      transition: all 0.3s ease;
    }
    
    .skill-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .skill-card:hover::before {
      width: 100%;
      opacity: 0.1;
    }
    
    .skill-icon {
      font-size: 2.5rem;
      margin-bottom: 20px;
      color: var(--primary-color);
    }
    
    .skill-title {
      font-size: 1.3rem;
      font-weight: 600;
      margin-bottom: 15px;
    }
    
    .skill-description {
      font-size: 0.95rem;
      color: #666;
      margin-bottom: 20px;
    }
    
    /* 作品集部分 */
    .portfolio {
      padding: 100px 50px;
      background-color: var(--light-color);
    }
    
    .portfolio-filter {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 50px;
    }
    
    .filter-btn {
      padding: 8px 20px;
      background: none;
      border: none;
      font-size: 0.9rem;
      font-weight: 500;
      color: #666;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
    }
    
    .filter-btn::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 2px;
      background-color: var(--primary-color);
      transition: width 0.3s ease;
    }
    
    .filter-btn:hover, .filter-btn.active {
      color: var(--primary-color);
    }
    
    .filter-btn:hover::after, .filter-btn.active::after {
      width: 100%;
    }
    
    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 30px;
    }
    
    .portfolio-item {
      position: relative;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .portfolio-image {
      width: 100%;
      height: 250px;
      object-fit: cover;
      transition: all 0.5s ease;
    }
    
    .portfolio-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 51, 102, 0.9);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: all 0.5s ease;
    }
    
    .portfolio-item:hover .portfolio-overlay {
      opacity: 1;
    }
    
    .portfolio-item:hover .portfolio-image {
      transform: scale(1.1);
    }
    
    .portfolio-title {
      color: white;
      font-size: 1.3rem;
      font-weight: 600;
      margin-bottom: 10px;
      transform: translateY(20px);
      transition: all 0.5s ease;
    }
    
    .portfolio-category {
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.9rem;
      transform: translateY(20px);
      transition: all 0.5s ease;
    }
    
    .portfolio-item:hover .portfolio-title,
    .portfolio-item:hover .portfolio-category {
      transform: translateY(0);
    }
    
    /* 联系部分 */
    .contact {
      padding: 100px 50px;
      background-color: var(--dark-color);
      color: white;
    }
    
    .contact .section-title {
      color: white;
    }
    
    .contact-content {
      display: flex;
      gap: 50px;
    }
    
    .contact-info {
      flex: 1;
    }
    
    .contact-item {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
    }
    
    .contact-icon {
      width: 50px;
      height: 50px;
      background-color: var(--primary-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      font-size: 1.2rem;
    }
    
    .contact-text h3 {
      font-size: 1.1rem;
      margin-bottom: 5px;
    }
    
    .contact-text p {
      color: rgba(255, 255, 255, 0.7);
    }
    
    .contact-form {
      flex: 1;
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    .form-control {
      width: 100%;
      padding: 15px;
      background-color: rgba(255, 255, 255, 0.1);
      border: none;
      border-radius: 5px;
      color: white;
      font-family: 'Montserrat', sans-serif;
      font-size: 1rem;
    }
    
    .form-control::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }
    
    textarea.form-control {
      min-height: 150px;
      resize: vertical;
    }
    
    .submit-btn {
      padding: 12px 30px;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 30px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .submit-btn:hover {
      background-color: var(--light-color);
      color: var(--dark-color);
      transform: translateY(-3px);
    }
    
    /* 页脚 */
    .footer {
      padding: 30px 0;
      background-color: #222;
      color: rgba(255, 255, 255, 0.7);
      text-align: center;
    }
    
    .social-links {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 20px;
    }
    
    .social-link {
      width: 40px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-decoration: none;
      transition: all 0.3s ease;
    }
    
    .social-link:hover {
      background-color: var(--primary-color);
      transform: translateY(-5px);
    }
    
    /* 响应式设计 */
    @media (max-width: 992px) {
      .hero-title {
        font-size: 3rem;
      }
      
      .about-content,
      .contact-content {
        flex-direction: column;
      }
      
      .nav-container {
        padding: 0 20px;
      }
    }
    
    @media (max-width: 768px) {
      .hero-content {
        flex-direction: column;
      }
      
      .hero-text,
      .hero-image {
        flex: none;
        width: 100%;
      }
      
      .hero-image {
        height: 50vh;
      }
      
      .about-stats {
        grid-template-columns: 1fr;
      }
      
      .nav-links {
        display: none;
      }
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .animated {
      animation: fadeIn 1s ease forwards;
    }
  </style>
</head>
<body>
  <!-- 导航栏 -->
  <nav class="nav">
    <div class="nav-container">
      <a href="#" class="logo">李四</a>
      <div class="nav-links">
        <a href="#about" class="nav-link">关于我</a>
        <a href="#skills" class="nav-link">技能</a>
        <a href="#portfolio" class="nav-link">作品集</a>
        <a href="#contact" class="nav-link">联系我</a>
      </div>
    </div>
  </nav>
  
  <!-- 英雄区域 -->
  <section class="hero" id="home">
    <div class="hero-content">
      <div class="hero-text">
        <h1 class="hero-title animated">创意设计师 <span>&</span> 艺术总监</h1>
        <p class="hero-subtitle animated">专注于品牌设计、UI/UX设计和创意策划，为品牌注入灵魂和活力。</p>
        <a href="#contact" class="hero-cta animated">联系我</a>
      </div>
      <div class="hero-image">
        <img src="https://gr-test.oss-cn-shenzhen.aliyuncs.com/02a0271622fba72d55334191e540f2793cee0eee8227010727b0ad469bd8c063.png" alt="个人照片">
      </div>
    </div>
  </section>
  
  <!-- 关于我部分 -->
  <section class="about" id="about">
    <div class="container">
      <h2 class="section-title">关于我</h2>
      <div class="about-content">
        <div class="about-text">
          <p>我是一名拥有5年经验的创意设计师和艺术总监，专注于品牌设计、UI/UX设计和创意策划。我热爱将创意想法转化为视觉作品，为品牌注入灵魂和活力。</p>
          <p>我的设计理念是"简约而不简单"，注重用户体验和视觉美感的平衡。我擅长理解客户需求，并将其转化为独特而有效的设计解决方案。</p>
          <p>在过去的5年中，我有幸与多家知名品牌合作，包括阿里巴巴、腾讯和小米等。我的作品曾获得多项设计大奖，包括红点设计奖和IF设计奖。</p>
        </div>
        <div class="about-stats">
          <div class="stat-item">
            <div class="stat-number">5+</div>
            <div class="stat-title">年设计经验</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">50+</div>
            <div class="stat-title">完成项目</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">15+</div>
            <div class="stat-title">获奖作品</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">30+</div>
            <div class="stat-title">满意客户</div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <!-- 技能部分 -->
  <section class="skills" id="skills">
    <div class="container">
      <h2 class="section-title">我的专长</h2>
      <div class="skills-container">
        <div class="skill-card">
          <div class="skill-icon">🎨</div>
          <h3 class="skill-title">品牌设计</h3>
          <p class="skill-description">创建独特而有记忆点的品牌标识，包括logo设计、品牌指南、包装设计和企业形象设计。</p>
        </div>
        <div class="skill-card">
          <div class="skill-icon">💻</div>
          <h3 class="skill-title">UI/UX设计</h3>
          <p class="skill-description">设计直观、美观且用户友好的界面，创造流畅的用户体验，包括网站设计、移动应用设计和交互原型设计。</p>
        </div>
        <div class="skill-card">
          <div class="skill-icon">📱</div>
          <h3 class="skill-title">移动应用设计</h3>
          <p class="skill-description">专注于移动平台的用户界面和体验设计，确保在小屏幕上也能提供出色的视觉效果和交互体验。</p>
        </div>
        <div class="skill-card">
          <div class="skill-icon">📷</div>
          <h3 class="skill-title">摄影与后期</h3>
          <p class="skill-description">专业的摄影技能和后期处理能力，为品牌提供高质量的视觉素材，增强品牌形象。</p>
        </div>
        <div class="skill-card">
          <div class="skill-icon">🎬</div>
          <h3 class="skill-title">视频制作</h3>
          <p class="skill-description">从概念到成片的全流程视频制作，包括故事板设计、拍摄指导和后期编辑，为品牌创造引人入胜的视频内容。</p>
        </div>
        <div class="skill-card">
          <div class="skill-icon">💡</div>
          <h3 class="skill-title">创意策划</h3>
          <p class="skill-description">为品牌活动和营销活动提供创意策划，从概念构思到执行方案，确保品牌信息有效传达。</p>
        </div>
      </div>
    </div>
  </section>
  
  <!-- 作品集部分 -->
  <section class="portfolio" id="portfolio">
    <div class="container">
      <h2 class="section-title">精选作品</h2>
      <div class="portfolio-filter">
        <button class="filter-btn active" data-filter="all">全部</button>
        <button class="filter-btn" data-filter="branding">品牌设计</button>
        <button class="filter-btn" data-filter="ui">UI/UX</button>
        <button class="filter-btn" data-filter="photography">摄影</button>
      </div>
      <div class="portfolio-grid">
        <div class="portfolio-item" data-category="branding">
          <img src="https://via.placeholder.com/600x400/ff3366/ffffff?text=品牌设计项目1" alt="品牌设计项目" class="portfolio-image">
          <div class="portfolio-overlay">
            <h3 class="portfolio-title">科技公司品牌重塑</h3>
            <p class="portfolio-category">品牌设计</p>
          </div>
        </div>
        <div class="portfolio-item" data-category="ui">
          <img src="https://via.placeholder.com/600x400/6c63ff/ffffff?text=UI设计项目1" alt="UI设计项目" class="portfolio-image">
          <div class="portfolio-overlay">
            <h3 class="portfolio-title">金融App界面设计</h3>
            <p class="portfolio-category">UI/UX设计</p>
          </div>
        </div>
        <div class="portfolio-item" data-category="photography">
          <img src="https://via.placeholder.com/600x400/2cced2/ffffff?text=摄影项目1" alt="摄影项目" class="portfolio-image">
          <div class="portfolio-overlay">
            <h3 class="portfolio-title">产品摄影系列</h3>
            <p class="portfolio-category">摄影</p>
          </div>
        </div>
        <div class="portfolio-item" data-category="branding">
          <img src="https://via.placeholder.com/600x400/ff3366/ffffff?text=品牌设计项目2" alt="品牌设计项目" class="portfolio-image">
          <div class="portfolio-overlay">
            <h3 class="portfolio-title">餐饮品牌视觉系统</h3>
            <p class="portfolio-category">品牌设计</p>
          </div>
        </div>
        <div class="portfolio-item" data-category="ui">
          <img src="https://via.placeholder.com/600x400/6c63ff/ffffff?text=UI设计项目2" alt="UI设计项目" class="portfolio-image">
          <div class="portfolio-overlay">
            <h3 class="portfolio-title">电商网站重设计</h3>
            <p class="portfolio-category">UI/UX设计</p>
          </div>
        </div>
        <div class="portfolio-item" data-category="photography">
          <img src="https://via.placeholder.com/600x400/2cced2/ffffff?text=摄影项目2" alt="摄影项目" class="portfolio-image">
          <div class="portfolio-overlay">
            <h3 class="portfolio-title">城市风光系列</h3>
            <p class="portfolio-category">摄影</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <!-- 联系部分 -->
  <section class="contact" id="contact">
    <div class="container">
      <h2 class="section-title">联系我</h2>
      <div class="contact-content">
        <div class="contact-info">
          <div class="contact-item">
            <div class="contact-icon">📧</div>
            <div class="contact-text">
              <h3>邮箱</h3>
              <p>lisi@example.com</p>
            </div>
          </div>
          <div class="contact-item">
            <div class="contact-icon">📱</div>
            <div class="contact-text">
              <h3>电话</h3>
              <p>13987654321</p>
            </div>
          </div>
          <div class="contact-item">
            <div class="contact-icon">📍</div>
            <div class="contact-text">
              <h3>地址</h3>
              <p>上海市浦东新区创意园区</p>
            </div>
          </div>
          <div class="contact-item">
            <div class="contact-icon">🔗</div>
            <div class="contact-text">
              <h3>社交媒体</h3>
              <p>微博、Behance、Dribbble</p>
            </div>
          </div>
        </div>
        <div class="contact-form">
          <form>
            <div class="form-group">
              <input type="text" class="form-control" placeholder="您的姓名">
            </div>
            <div class="form-group">
              <input type="email" class="form-control" placeholder="您的邮箱">
            </div>
            <div class="form-group">
              <input type="text" class="form-control" placeholder="主题">
            </div>
            <div class="form-group">
              <textarea class="form-control" placeholder="您的留言"></textarea>
            </div>
            <button type="submit" class="submit-btn">发送留言</button>
          </form>
        </div>
      </div>
    </div>
  </section>
  
  <!-- 页脚 -->
  <footer class="footer">
    <div class="container">
      <div class="social-links">
        <a href="#" class="social-link">微</a>
        <a href="#" class="social-link">Be</a>
        <a href="#" class="social-link">Db</a>
        <a href="#" class="social-link">In</a>
      </div>
      <p>&copy; 2023 李四 - 创意设计师 & 艺术总监. 保留所有权利.</p>
    </div>
  </footer>
  
  <script>
    // 导航栏滚动效果
    window.addEventListener('scroll', function() {
      const nav = document.querySelector('.nav');
      if (window.scrollY > 50) {
        nav.style.padding = '10px 0';
        nav.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
      } else {
        nav.style.padding = '20px 0';
        nav.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
      }
    });
    
    // 作品集筛选功能
    const filterBtns = document.querySelectorAll('.filter-btn');
    const portfolioItems = document.querySelectorAll('.portfolio-item');
    
    filterBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        // 移除所有按钮的active类
        filterBtns.forEach(btn => btn.classList.remove('active'));
        // 为当前按钮添加active类
        this.classList.add('active');
        
        const filter = this.getAttribute('data-filter');
        
        portfolioItems.forEach(item => {
          if (filter === 'all' || item.getAttribute('data-category') === filter) {
            item.style.display = 'block';
          } else {
            item.style.display = 'none';
          }
        });
      });
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        
        const targetId = this.getAttribute('href');
        const targetElement = document.querySelector(targetId);
        
        window.scrollTo({
          top: targetElement.offsetTop - 70,
          behavior: 'smooth'
        });
      });
    });
  </script>
</body>
</html>